<template>
  <div class="app-container">
    <!-- 基本信息 -->
    <div class="titleLineGreen">基本信息</div>
    <div class="info flex">
      <el-image v-if="info && info.coursePic" class="info_avatar" :src="info.coursePic"
        :preview-src-list="[info.coursePic]"></el-image>
      <div class="info_right">
        <!-- 教师信息 -->
        <div class="info_teacherinfos">
          <div class="flex info_teacherinfo_line1">
            <div class="info_teacherinfo_line_item flex">
              <div class="info_teacherinfo_line_item_nickname overtxt">
                {{ info.courseName }}
              </div>
            </div>
          </div>
        </div>
        <div class="flex">
          <!-- 数据卡片 -->
          <div class="info_dataCards flex">
            <div class="info_dataCard" style="width: 320px; margin: 0 0 0 0px">
              <!-- 数据卡片的顶行 -->
              <div class="info_dataCard_topLine flex">
                <div class="info_dataCard_topLine_point" style="background: rgba(106, 213, 108)"></div>
                <div class="info_dataCard_topLine_lable">基本信息</div>
              </div>
              <!-- 数据卡片数据行 -->
              <div class="info_dataCard_dateLine info_dataCard_dateLine2 flex">
                <div class="info_dataCard_dateLine_item info_dataCard_dateLine_item_s">
                  <div class="info_dataCard_dateLine_item_lable">创建人</div>
                  <div class="info_dataCard_dateLine_item_value">
                    <Texttooltip :width="100" :text="info.creatorName ? info.creatorName : '--'"></Texttooltip>
                  </div>
                </div>
                <div class="info_dataCard_dateLine_item info_dataCard_dateLine_item_s">
                  <div class="info_dataCard_dateLine_item_lable">岗位</div>
                  <div class="info_dataCard_dateLine_item_value">
                    <Texttooltip :width="100" :text="info.postName ? info.postName : '--'"></Texttooltip>
                  </div>
                </div>
                <div class="info_dataCard_dateLine_item info_dataCard_dateLine_item_s">
                  <div class="info_dataCard_dateLine_item_lable">课时(h)</div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{ info.studyTime ? info.studyTime : "--" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="info_dataCards flex">
            <div class="info_dataCard" style="width: 650px; margin: 0 0 0 20px">
              <!-- 数据卡片的顶行 -->
              <div class="info_dataCard_topLine flex">
                <div class="info_dataCard_topLine_point" style="background: rgba(44, 172, 255, 1)"></div>
                <div class="info_dataCard_topLine_lable">学习数据</div>
              </div>
              <!-- 数据卡片数据行 -->
              <div class="info_dataCard_dateLine info_dataCard_dateLine2 flex">
                <div class="info_dataCard_dateLine_item">
                  <div class="info_dataCard_dateLine_item_lable">学习人数</div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{ info.stuNum || info.stuNum == 0 ? info.stuNum : "--" }}
                  </div>
                </div>
                <div class="info_dataCard_dateLine_item">
                  <div class="info_dataCard_dateLine_item_lable">
                    未完成人数
                  </div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{
        info.unFinishNum || info.unFinishNum == 0
          ? info.unFinishNum
          : "--"
      }}
                  </div>
                </div>
                <div class="info_dataCard_dateLine_item">
                  <div class="info_dataCard_dateLine_item_lable">
                    已完成人数
                  </div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{
          info.finishNum || info.finishNum == 0
            ? info.finishNum
            : "--"
        }}
                  </div>
                </div>
                <div class="info_dataCard_dateLine_item">
                  <div class="info_dataCard_dateLine_item_lable">
                    平均分(百分制)<el-tooltip class="item" effect="dark" placement="bottom">
                      <i class="el-icon-question shou" style="
                          font-size: 16px;
                          vertical-align: middle;
                          margin-left: 5px;
                        "></i>
                      <div slot="content">
                        {{
          this.queryParams.schoolCourseId
            ? " 员工平均分之和/员工人数(课程已完成的员工)"
            : "各门店员工平均分之和/员工人数（课程已完成的员工）"
        }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{ info.avgScore ? info.avgScore : "--" }}
                  </div>
                </div>
                <div class="info_dataCard_dateLine_item">
                  <div class="info_dataCard_dateLine_item_lable">
                    平均学习时长(min)<el-tooltip class="item" effect="dark" placement="bottom">
                      <i class="el-icon-question shou" style="
                          font-size: 16px;
                          vertical-align: middle;
                          margin-left: 5px;
                        "></i>
                      <div slot="content">
                        {{
        this.queryParams.schoolCourseId
          ? " 员工学习时长之和/员工人数(课程已完成的员工)"
          : "各门店员工学习时长之和/员工人数（课程已完成的员工）"
      }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{
          info.avgStudyTime
            ? (info.avgStudyTime / 60).toFixed(1)
            : "--"
        }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 点赞数据 -->
          <div class="info_dataCards flex">
            <div class="info_dataCard" style="width: 220px; margin: 0 0 0 20px">
              <!-- 数据卡片的顶行 -->
              <div class="info_dataCard_topLine flex">
                <div class="info_dataCard_topLine_point" style="background: rgba(106, 213, 108)"></div>
                <div class="info_dataCard_topLine_lable">评价数据</div>
              </div>
              <!-- 数据卡片数据行 -->
              <div class="info_dataCard_dateLine info_dataCard_dateLine2 flex">
                <div class="info_dataCard_dateLine_item info_dataCard_dateLine_item_s">
                  <div class="info_dataCard_dateLine_item_lable">点赞总数</div>
                  <div class="info_dataCard_dateLine_item_value">
                    <Texttooltip :width="100" :text="info.praiseNum ? info.praiseNum : '--'"></Texttooltip>
                  </div>
                </div>
                <div class="info_dataCard_dateLine_item info_dataCard_dateLine_item_s">
                  <div class="info_dataCard_dateLine_item_lable">综合评分</div>
                  <div class="info_dataCard_dateLine_item_value">
                    <Texttooltip :width="100" :text="info.totalCourseStar ? info.totalCourseStar : '--'"></Texttooltip>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情 -->
    <div class="titleLineGreen" style="margin-top: 40px">详情</div>
    <div class="commonMenu">
      <el-menu :default-active="active + ''" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="0" v-if="!this.$route.query.from">授课记录</el-menu-item>
        <el-menu-item index="1">学习记录</el-menu-item>
        <el-menu-item index="2" v-if="!this.$route.query.from">评价记录</el-menu-item>
      </el-menu>
    </div>
    <el-form style="margin-top: 20px" :model="queryParams" ref="queryForm" size="small" :inline="true"
      label-width="100px">
      <el-form-item label="员工" prop="nickName" v-if="active == 1">
        <el-input v-input-restrict v-model="queryParams.nickName" placeholder="请输入员工姓名" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="岗位" prop="postIds" v-if="active == 1">
        <el-select v-model="queryParams.postIds" placeholder="请选择岗位" filterable multiple>
          <el-option v-for="dict in postOptions" :key="dict.postId" :label="dict.postName" :value="dict.postId" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="studyStatus" v-if="active == 1">
        <el-select v-model="queryParams.studyStatus" placeholder="请选择状态" filterable>
          <!-- 状态 -1.未完成  0.未开始   1.进行中   2.已完成 3.重修', -->
          <el-option label="全部" :value="undefined" />
          <el-option label="未开始" :value="0" />
          <el-option label="学习中" :value="1" />
          <el-option label="已完成" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="门店名称" prop="schoolName" v-if="$route.query.from !== 'course_order' && active != '1'">
        <el-input v-input-restrict v-model="queryParams.schoolName" placeholder="请输入门店名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="门店" prop="schoolIds" v-if="$route.query.from !== 'course_order' && active == '1'">
        <el-select v-model="queryParams.schoolIds" placeholder="请选择门店" filterable multiple>
          <el-option v-for="dict in schools" :key="dict.schoolId" :label="dict.schoolName" :value="dict.schoolId" />
        </el-select>
      </el-form-item>
      <el-form-item label="门店类型" prop="tagId" v-if="$route.query.from !== 'course_order' && active != 2">
        <el-select v-model="queryParams.tagId" placeholder="请选择门店类型" filterable>
          <el-option label="全部" :value="undefined" />
          <el-option v-for="dict in Tag" :key="dict.tagId" :label="dict.tagName" :value="dict.tagId" />
        </el-select>
      </el-form-item>
      <el-form-item label="大区" prop="regionId" v-if="$route.query.from !== 'course_order' && active != 2">
        <el-select v-model="queryParams.regionId" placeholder="请选择大区" filterable>
          <el-option label="全部" :value="undefined" />
          <el-option v-for="dict in area" :key="dict.regionId" :label="dict.regionName" :value="dict.regionId" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="active == 0 || active == 1" :label="active == 1 ? '学习开始时间' : '生效时间'" prop="StartDate"
        v-show="showSearch">
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="queryParams.StartDate" type="daterange"
          align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          :picker-options="$pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if="active == 0 || active == 1" :label="active == 1 ? '学习结束时间' : '有效期至'" prop="EndDate"
        v-show="showSearch">
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="queryParams.EndDate" type="daterange" align="right"
          unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          :picker-options="$pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button v-preventReClick icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button v-if="active == 2 || active == 1" v-preventReClick type="warning" plain icon="el-icon-download"
          size="mini" @click="handleExport">{{ active == 2 ? '导出评价明细' : '导出全部学习明细' }}</el-button>
      </el-form-item>
      <right-toolbar style="margin-top: 3px" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-form>
    <el-table v-if="active == 0" v-loading="loading" :data="postList" style="margin-top: 20px">
      <el-table-column label="门店" align="center" prop="schoolName" />
      <el-table-column label="门店类型" align="center" prop="tagName" />
      <el-table-column label="门店大区" align="center" prop="regionName" />
      <el-table-column label="训练员" align="center" prop="teacherNames" />
      <el-table-column label="学习人数" align="center" prop="stuNum" />
      <el-table-column align="center" prop="avgScore" sortable>
        <template #header>
          平均分(百分制)<el-tooltip class="item" effect="dark" placement="bottom">
            <i class="el-icon-question shou" style="font-size: 16px; vertical-align: middle; margin-left: 5px"></i>
            <div slot="content">
              员工平均分之和/员工人数 （课程已完成的员工）
            </div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <div>{{ scope.row.avgScore }}</div>
        </template>
      </el-table-column>
      <el-table-column label="生效时间" align="center" prop="startDate" sortable>
        <template slot-scope="scope">
          <div>{{ scope.row.startDate }}</div>
        </template>
      </el-table-column>

      <el-table-column label="有效期至" align="center" prop="endDate" sortable>
        <template slot-scope="scope">
          <div>{{ scope.row.endDate }}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-table v-if="active == 1" v-loading="loading" :data="postList" style="margin-top: 20px">
      <el-table-column label="员工" align="center" prop="nickName" />
      <el-table-column label="岗位" align="center" prop="postName" />
      <el-table-column label="门店" align="center" prop="schoolName" v-if="$route.query.from !== 'course_order'" />
      <el-table-column label="状态" align="center" prop="studyStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.studyStatus == -1">未完成</div>
          <div v-if="scope.row.studyStatus == 0">未开始</div>
          <div v-if="scope.row.studyStatus == 1">学习中</div>
          <div v-if="scope.row.studyStatus == 2">已完成</div>
          <div v-if="scope.row.studyStatus == 3">重修</div>
        </template>
      </el-table-column>
      <el-table-column label="学习进度" align="center" prop="learningProgress">
        <template slot-scope="scope">

          <div>{{ scope.row.learningProgress }}%</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="avgScore" sortable>
        <template #header>
          平均分(百分制)<el-tooltip class="item" effect="dark" placement="bottom">
            <i class="el-icon-question shou" style="font-size: 16px; vertical-align: middle; margin-left: 5px"></i>
            <div slot="content">
              <div>课程考核总分/考核数</div>
              <div>(员工此课程已完成状态下计算平均分)</div>
              <div>"0"：课程平均成绩</div>
              <div>" "：该课程没有考核</div>
              <div>"-"：员工尚未完成课程</div>
              <div>"/"：手动通过</div>
            </div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <div>
            {{
        scope.row.manualPass
          ? "/"
          : scope.row.studyStatus == 2 || scope.row.studyStatus == -1
            ? scope.row.avgScore
            : "--"
      }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="学习开始时间" align="center" prop="startTime" sortable>
        <template slot-scope="scope">
          <div>{{ parseTime(scope.row.startTime) }}</div>
        </template>
      </el-table-column>

      <el-table-column label="学习完成时间" align="center" prop="finishTime" sortable>
        <template slot-scope="scope">
          <div>{{ parseTime(scope.row.finishTime) }}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-preventReClick size="mini" type="text" icon="el-icon-view" v-if="scope.row.studyStatus !== 0"
            @click="handleGradeDetail(scope.row, scope.$index)">成绩详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table v-if="active == 2" v-loading="loading" :data="postList" style="margin-top: 20px">
      <el-table-column label="员工" width="100" align="center" prop="nickName" />
      <el-table-column label="岗位" width="150" align="center" prop="postNames" />
      <el-table-column label="门店" width="100" align="center" prop="schoolNames" />

      <el-table-column width="80" align="center" prop="avgScore">
        <template #header>
          点赞<el-tooltip class="item" effect="dark" placement="bottom">
            <i class="el-icon-question shou" style="font-size: 16px; vertical-align: middle; margin-left: 5px"></i>
            <div slot="content">
              <div>1：已点赞</div>
              <div>0：未点赞</div>
            </div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <div>
            {{ scope.row.praiseFlag ? 1 : 0 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" prop="avgScore">
        <template #header>
          综合评分<el-tooltip class="item" effect="dark" placement="bottom">
            <i class="el-icon-question shou" style="font-size: 16px; vertical-align: middle; margin-left: 5px"></i>
            <div slot="content">
              <div>（课程满意度+教学适用性+内容准确度+考卷合理性）/4</div>
            </div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <div>
            {{ scope.row.courseStar }}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="115" label="课程满意度评分" align="center" prop="courseSatisfactionStar" />
      <el-table-column width="115" label="教学适用性评分" align="center" prop="teachApplicabilityStar" />
      <el-table-column width="115" label="内容准确度评分" align="center" prop="contentAccuracyStar" />
      <el-table-column width="115" label="考卷合理性评分" align="center" prop="examRationalityStar" />
      <el-table-column label="评价时间" align="center" prop="courseEvaluateTime" sortable>
        <template slot-scope="scope">
          <div>{{ scope.row.courseEvaluateTime }}</div>
        </template>
      </el-table-column>
      <el-table-column label="评价" align="center" prop="commentToCourse">
        <template slot-scope="scope">
          <Texttooltip width="100%" :text="scope.row.commentToCourse ? scope.row.commentToCourse : '--'"></Texttooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 成绩详情 -->
    <studentGradeDetail :open.sync="studentGradeDetailOpen" :id="studentGradeDetailId" :index="studentGradeDetailIndex"
      :list="studentGradeDetailList"></studentGradeDetail>
    <!-- 评价详情 -->
    <courseAppraiseDetailDia :open.sync="teacherDetailDiaOpen" :item="teacherDetailDiaItem"></courseAppraiseDetailDia>
  </div>
</template>

<script>
import studentGradeDetail from "@/components/studentGradeDetail.vue";
import courseAppraiseDetailDia from "./components/courseAppraiseDetailDia.vue";
import {
  getPost_courseStuDataBase,
  getPost_courseSchoolList,
  getPost_courseStudyList,
  getPost_courseEvaluateList,
} from "@/api/course/course";
import { listPost_region } from "@/api/school/area";
import { listPost_tag } from "@/api/school/tag";
import { listPost } from "@/api/system/post";
import { listPost_school } from "@/api/school/list";
export default {
  components: { studentGradeDetail, courseAppraiseDetailDia },
  dicts: ["sys_course_type"],
  props: {},
  data() {
    return {
      // 门店类型
      Tag: [],
      // 大区列表
      area: [],
      // 岗位选项
      postOptions: [],
      active: "0",
      // 评价详情组件参数
      teacherDetailDiaOpen: false,
      teacherDetailDiaItem: {},
      // 成绩详情组件参数
      studentGradeDetailOpen: false,
      studentGradeDetailId: "",
      studentGradeDetailIndex: "",
      studentGradeDetailList: [],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 查询参数
      data: {},
      queryParams: {
        pageNum: 1,
        pageSize: 9999,
        schoolIds: [],
        schoolName: undefined,
        tagId: undefined,
        regionId: undefined,
        StartDate: undefined,
        EndDate: undefined,
        postIds: [],
        studyStatus: undefined,
        nickName: undefined,
      },
      info: { courseName: "" },
      classes: [],
      schools: [],
    };
  },
  watch: {},
  methods: {
    /** 导出按钮操作 */
    handleExport() {
      if (this.active == 2) {
        this.download(
          "student/courseStudyManager/exportCourseEvaluate",
          {
            ...this.data,
          },
          `post_${new Date().getTime()}.xlsx`
        );
      } else {
        this.download(
          "manager/course/exportStudyList",
          {
            ...this.data,
          },
          `post_${new Date().getTime()}.xlsx`
        );
      }

    },
    handleSelect(key, keyPath) {
      this.active = key;
      this.resetQuery();
    },
    handleAppraiseDetail(row, index) {
      this.teacherDetailDiaOpen = true;
      this.teacherDetailDiaItem = row;
    },
    handleGradeDetail(row, index) {
      console.log(row, index);
      this.studentGradeDetailOpen = true;
      // 此处为获取ccCourseStuI
      this.studentGradeDetailId = row.studentId;
      this.studentGradeDetailIndex = index;
      this.studentGradeDetailList = this.postList;
    },
    /** 查询岗位列表 */
    async getList() {
      this.loading = true;
      let res;
      let data = JSON.parse(JSON.stringify(this.queryParams));
      data.postIds = this.queryParams.postIds.length > 0 ? this.queryParams.postIds.join(',') : '';
      data.schoolIds = this.queryParams.schoolIds.length > 0 ? this.queryParams.schoolIds.join(',') : '';
      data.beforeStartDate = this.queryParams.StartDate
        ? this.queryParams.StartDate[0]
        : "";
      data.afterStartDate = this.queryParams.StartDate
        ? this.queryParams.StartDate[1]
        : "";
      data.beforeEndDate = this.queryParams.EndDate
        ? this.queryParams.EndDate[0]
        : "";
      data.afterEndDate = this.queryParams.EndDate
        ? this.queryParams.EndDate[1]
        : "";
      if (this.$route.query.from == "course_order") {
        data.schoolCourseId = this.$route.query.schoolCourseId;
      } else {
        data.courseId = this.$route.query.courseId;
      }
      this.data = data
      if (this.active == 0) {
        res = await getPost_courseSchoolList(data);
        this.postList = res.rows;
      } else if (this.active == 1) {
        res = await getPost_courseStudyList(data);
        this.postList = res.rows;
      } else {
        res = await getPost_courseEvaluateList(data);
        this.postList = res.data;
      }
      this.loading = false;
      this.total = res.total || res.total == 0 ? res.total : res.data.length;
    },
    async getInfo() {
      let res = await getPost_courseStuDataBase({
        courseId: this.$route.query.courseId,
        schoolId: this.$route.query.schoolId,
      });
      this.info = res.data;
    },
    handleQuery() {
      this.data = {}
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    async getSchool() {
      let res = await listPost_school({
        pageNum: 1,
        pageSize: 9999,
      });
      this.schools = res.rows;
    },
    async getTag() {
      let res = await listPost_tag({
        pageNum: 1,
        pageSize: 9999,
      });
      this.Tag = res.rows;
    },
    async getArea() {
      let res = await listPost_region({
        pageNum: 1,
        pageSize: 9999,
      });
      this.area = res.rows;
    },
    /* 获取岗位 */
    getPostList() {
      listPost({
        pageNum: 1,
        pageSize: 9999,
      }).then((response) => {
        this.postOptions = response.rows;
      });
    },
  },
  created() { },
  mounted() {
    if (this.$route.query.from == "course_order") {
      this.active = 1;
    } else {
      this.active = 0;
    }
    this.getPostList();
    this.getTag();
    this.getArea();
    this.getInfo();
    this.getList();
    this.getSchool()
  },
};
</script>
<style scoped lang="scss">
.info.flex {
  margin: 23px 0 0 0;

  .info_avatar {
    width: 120px;
    height: 64px;
    box-sizing: border-box;
    border: 1px solid rgba(229, 229, 229, 1);
    margin: 0 24px 0 10px;
  }

  .info_right {
    .info_teacherinfos {
      .info_teacherinfo_line_item_short {
        box-sizing: border-box;
        padding-right: 25px;
        width: 200px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: rgba(96, 98, 102, 1);
      }

      .info_teacherinfo_line_item {
        box-sizing: border-box;
        padding-right: 25px;
        width: 276px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: rgba(96, 98, 102, 1);

        .info_teacherinfo_line_item_nickname {
          font-size: 18px;
          font-weight: 600;
          line-height: 20px;
          color: rgba(51, 51, 51, 1);
          max-width: 227px;
        }

        .sex {
          margin: 5px 0 0 5px;
          width: 12px;
          height: 12px;
        }
      }

      .info_teacherinfo_line1 {
        margin-top: 3px;
      }

      .info_teacherinfo_line2 {
        margin-top: 15px;
      }
    }

    .info_dataCards {
      margin-top: 22px;

      .info_dataCard {
        height: 112px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 12px rgba(99, 99, 99, 0.14);
        box-sizing: border-box;
        padding: 16px 0 0 20px;

        .info_dataCard_topLine.flex {
          .info_dataCard_topLine_point {
            margin: 5px 8px 0 0;
            width: 10px;
            height: 10px;
            border-radius: 5px;
          }

          .info_dataCard_topLine_lable {
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            color: rgba(51, 51, 51, 1);

            span {
              margin: 4px 0 0 0;
              font-size: 10px;
              font-weight: 400;
              line-height: 14px;
              color: rgba(51, 51, 51, 1);
            }
          }
        }

        .info_dataCard_dateLine2 {
          .info_dataCard_dateLine_item:first-of-type {
            width: 100px !important;
          }
        }

        .info_dataCard_dateLine1 {
          .info_dataCard_dateLine_item:last-of-type {
            width: 92px !important;
          }
        }

        .info_dataCard_dateLine.flex {
          margin-top: 20px;

          .info_dataCard_dateLine_item_s {
            width: 100px !important;
          }

          .info_dataCard_dateLine_item {
            width: 130px;

            .info_dataCard_dateLine_item_lable {
              font-size: 12px;
              font-weight: 400;
              line-height: 17px;
              color: rgba(153, 153, 153, 1);
            }

            .info_dataCard_dateLine_item_value {
              margin-top: 4px;
              font-size: 14px;
              font-weight: 600;
              line-height: 25px;
              color: #333333;

              span {
                margin: 4px 0 0 0;
                font-size: 12px;
                font-weight: 400;
                line-height: 16px;
                color: rgba(51, 51, 51, 1);
              }
            }
          }
        }
      }
    }
  }
}
</style>
